<!--  -->
<template>
  <div class="table">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="a1" :label="$t('mesProdOrderPlan.testItem')" width="180">
        <template slot-scope="scope">
          <p class="padding-left-5">{{ scope.row.a1 }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="a2" :label="$t('mesProdOrderPlan.testSubItem')" width="280">
        <template slot-scope="scope">
          <div
            class="flex-c-c row"
            :key="index"
            v-for="(item, index) in scope.row.a2"
            :class="scope.row.a2.length - 1 == index ? '' : 'border-b'"
          >
            <div class="left" :style="{ color: item.titColor, background: item.titBk }">
              {{ item.tit }}
            </div>
            <div class="right" v-if="item.list && item.list.length">
              <p
                :style="{ color: ite.titColor, background: ite.titBk }"
                :class="item.list.length - 1 == i ? '' : 'border-b'"
                :key="i"
                class="padding-left-5"
                v-for="(ite, i) in item.list"
              >
                <template v-if="typeof ite.tit == 'string'">{{ ite.tit }}</template>

                <template v-else>
                  <div class="">
                    <p class="tit-arr" :key="j" v-for="(items, j) in ite.tit">
                      {{ items }}
                    </p>
                  </div></template
                >
              </p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" :label="$t('mesProdOrderPlan.testContent')" width="300">
        <template slot-scope="scope">
          <div class="flex-d-c">
            <p
              :title="ite"
              :class="getFlat(scope.row.a2).length - 1 == i ? '' : 'border-b'"
              class="padding-left-5 view-text"
              :key="i"
              v-for="(ite, i) in getFlat(scope.row.a2)"
              :style="{ color: ite.conterColor, background: ite.conterBk }"
            >
              {{ ite.conter }}
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="a1" :label="$t('mesProdOrderPlan.machineBarCode')">
        <template slot-scope="scope"> </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "mesProdOrderPlantable",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      tableData: [
        {
          a1: $i18n.t('mesProdOrderPlan.appearanceAndStructure'),
          a2: [
            {
              tit: $i18n.t('mesProdOrderPlan.packingBox1'),
              list: [
                {
                  tit: $i18n.t('mesProdOrderPlan.mark'),
                  conter: $i18n.t('mesProdOrderPlan.printIdentification')
                },
                {
                  tit: $i18n.t('mesProdOrderPlan.cabinet'),
                  conter: $i18n.t('mesProdOrderPlan.printIdentification')
                },
                {
                  tit: $i18n.t('mesProdOrderPlan.adhesiveTape'),
                  conter: $i18n.t('mesProdOrderPlan.printIdentificationClear')
                },
                {
                  tit: $i18n.t('mesProdOrderPlan.packingBelt'),
                  conter: $i18n.t('mesProdOrderPlan.printingUnrecognizable2')
                }
              ]
            },
            {
              tit: $i18n.t('mesProdOrderPlan.attachment'),
              list: [
                {
                  tit: $i18n.t('mesProdOrderPlan.packagingBag2'),
                  conter: $i18n.t('mesProdOrderPlan.printIdentification')
                },
                {
                  tit: $i18n.t('mesProdOrderPlan.base'),
                  conter: $i18n.t('mesProdOrderPlan.printErrorOrUnrecognizable')
                },
                {
                  tit: $i18n.t('mesProdOrderPlan.attachmentDetails'),
                  conter: $i18n.t('mesProdOrderPlan.printIdentification')
                },
                {
                  tit: $i18n.t('mesProdOrderPlan.attachmentDetails1'),
                  conter: $i18n.t('mesProdOrderPlan.printIdentificationClear2')
                }
              ]
            }
          ]
        },

        {
          a1: $i18n.t('mesProdOrderPlan.appearanceAndStructure'),
          a2: [
            {
              tit: $i18n.t('mesProdOrderPlan.packingBox1'),
              titColor: "#3c7fcd",
              titBk: "red",
              conter: $i18n.t('mesProdOrderPlan.printingUnrecognizable3'),
              conterColor: "#3c7fcd",
              conterBk: "red"
              //list: [],
            },

            {
              tit: $i18n.t('mesProdOrderPlan.packingBox1'),
              list: [
                {
                  conterColor: "#3c7fcd",
                  conterBk: "red",
                  titColor: "#3c7fcd",
                  titBk: "red",
                  tit: $i18n.t('mesProdOrderPlan.mark'),
                  conter: $i18n.t('mesProdOrderPlan.printingUnrecognizable4')
                },
                {
                  tit: [$i18n.t('mesProdOrderPlan.cabinet'), $i18n.t('mesProdOrderPlan.mark')],
                  conter: $i18n.t('mesProdOrderPlan.printingUnrecognizable5')
                },
                {
                  tit: $i18n.t('mesProdOrderPlan.adhesiveTape'),
                  conter: $i18n.t('mesProdOrderPlan.printingUnrecognizable6')
                },
                {
                  tit: $i18n.t('mesProdOrderPlan.packingBelt'),
                  conter: $i18n.t('mesProdOrderPlan.printingUnrecognizable2')
                }
              ]
            }
          ]
        }
      ]
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //合并一维数组
    getFlat(data) {
      let list = []

      data.map((item) => {
        if (item.conter) {
          list.push(item)
        }
        ;(item.list || []).map((ite) => {
          list.push(ite)
        })
      })

      return list
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
.table {
  .flex-c-c {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flex-d-c {
    display: flex;
    flex-direction: column;
  }
  .flex-s-e {
    display: flex;
    justify-content: space-evenly;
  }
  /deep/.el-table__row {
    .el-table__cell {
      padding: 0 !important;
    }
    .cell {
      padding: 0 !important;
    }
  }

  // /deep/.cell {
  //   padding: 0 !important;
  // }
  .row {
    .left {
      min-width: 100px;
      width: 100%;
      text-align: center;
    }

    .right {
      width: 100%;
      min-width: 50px;

      border-left: 1px solid #dedede;

      .tit-arr {
        display: inline-block;
        padding-left: 5px;
        // border-right: 1px solid #dedede;
      }
    }
  }
  .padding-left-5 {
    padding-left: 5px;
  }

  .border-b {
    border-bottom: 1px solid #dedede;
  }

  .view-text {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    //  height: 23px;
    // line-height: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
